import React, { Component } from 'react'

export default class App extends Component {    

    state = {
        list: ['摇一摇','晃一晃','扭一扭', '泡一泡', '奥利奥'],
        proList: [
            {
                name: '华为',
                list: [
                    'P30',
                    'P40',
                    'P50'
                ]
            },{
                name: '小米',
                list: [
                    'M1',
                    'M2',
                    'M3',
                    'M4',
                    'M13'
                ]
            }, {
                name: '菠萝',
                list: [
                    'B1',
                    'B2',
                    'B3'
                ]
            }
        ],
        htmlStr: '<h1 style="color: red">react 从入门到精通</h1>'
    }

  render() {


    // react 中尽可能减少模板代码的体量

    const listHtml = this.state.list.map((item,index,arr)=>{
        return (<li key={index}> {item} </li>)
    })

    const proHtml = this.state.proList.map((item,index)=>{
        return (<li key={index}>
            <h4>{item.name}</h4>
            <p>
                {
                    item.list.map((item1,index1)=>{
                        return (<span key={index1}> {item1} </span>)
                    })
                }
            </p>
        </li>)
    })

    return (
      <div>
        <ul>
            {
                this.state.list.map((item,index,arr)=>{
                    return (<li key={index}> {item} </li>)
                })
            }
        </ul>

        <ul>
            {listHtml}
        </ul>


        <ol>
            {
                this.state.proList.map((item,index)=>{
                    return (<li key={index}>
                        <h4>{item.name}</h4>
                        <p>
                            {
                                item.list.map((item1,index1)=>{
                                    return (<span key={index1}> {item1} </span>)
                                })
                            }
                        </p>
                    </li>)
                })
            }
        </ol>

        <ol>
            {proHtml}
        </ol>

        {this.state.htmlStr}
      </div>    
    )
  }
}
